<template>
	<view class="follow">
		<!-- 导航栏 -->
		<view class="follow-tab">
			<view class="follow-tab_box">
				<view class="follow-tab_item" :class="{active:activeIndex ===0}" @click="onTabSwitch(0)">文章</view>
				<view class="follow-tab_item" :class="{active:activeIndex ===1}" @click="onTabSwitch(1)">作者</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="follow-list">
			<swiper class="follow-list_swiper" :current="activeIndex" @change="change">
				<swiper-item>
					<list-scroll>
						<uni-load-more status="loading" iconType="snow" v-if="list.length ===0&&!afterQuest"></uni-load-more>
						<list-card v-for="item in list" :item="item" types="follow"></list-card>
						<view class="no-data" v-if="afterQuest">
							还没有收藏过文章喔
						</view>
					</list-scroll>
				</swiper-item>
				<swiper-item>
					<list-scroll>
						<list-author v-for="item in authorList" :item="item"></list-author>
					</list-scroll>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:0,
				list:[],
				afterQuest:false,
				authorList:[]
			}
		},
		onLoad(){
			this.getFollow()
			this.getAuthor()
			uni.$on('update_article',()=>{
				this.getFollow()
			})
			uni.$on('update_author',()=>{
				this.getAuthor()
			})
		},
		methods: {
			change(e){
				// console.log(e)
				this.activeIndex = e.detail.current
			},
			onTabSwitch(index){
				this.activeIndex = index
			},
			//获取收藏文章
			getFollow(){
				//这里需要参数user_id 但我在全局传了,所以这儿没有参数
				this.$api.get_follow().then((res)=>{
					// console.log(res)
					this.list = res.data
					this.afterQuest = this.list.length === 0;
				})
			},
			//获取关注的作者列表
			getAuthor(){
				this.$api.get_author().then((res)=>{
					console.log(res)
					this.authorList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	display: flex;
	height: 100%;
}
.follow{
	display: flex;
	flex-direction: column;
	flex: 1;
	box-sizing: border-box;
	height: 100%;
	.follow-tab{
		height: 30px;
		padding: 10px 20px;
		border-bottom: 1px red solid;
		.follow-tab_box{
			height: 100%;
			display: flex;
			border-radius: 5px;
			border: 1px $mk-base-color solid;
			.follow-tab_item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				color: #666;
				&:first-child{
					border-right: 1px $mk-base-color solid;
				}
				&.active{
					background-color: $mk-base-color;
					color: #FFFFFF;
				}
			}
		}
	}
	.follow-list{
		flex: 1;
		.follow-list_swiper{
			height: 100%;
			swiper-item{
				height: 100%;
			}
		}
	}
}
.no-data{
	padding: 50px;
	color: #666;
	font-size: 14px;
	text-align: center;
}
</style>
